<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
        <script src="../js/jquery-3.6.0.js"></script>
        <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
        <style>
            body {
                background-color: #F2F4F7;
            }

            .address, .cname {
                display: inline-block;
                width: 100px;
                margin-left: 20px;
                font-size: 13px;
            }

            .salary {
                margin-left: 100px;
                font-size: 13px;
                color: #F85A4E;
            }

            .type {
                margin-left: 100px;
                font-size: 13px;
            }

            .jname {
                font-size: 16px;
                margin-left: 20px;
            }

            .jobitem {
                margin: 20px 60px 10px;
                border-radius: 10px;
                width: 350px;
                height: 150px;
                background-color: #FFFFFF;
                cursor: pointer;
                padding: 5px;
            }

            .jobitem:hover .jname {
                color: #00a6a7;
            }

            .jobitem:hover {
                box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
            }

            .new, .recommend {
                width: 80%;
                margin: 20px auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap-reverse;
            }

            .head {
                width: auto;
                height: 60px;
                border: 1px solid cadetblue;
                text-align: right;
            }

            .head1 {
                border-radius: 90px;
                font-size: 20px;
                border: 1px cadetblue solid;
                text-align: right;
                cursor: pointer;
            }

            .head1:hover {
                color: #00D7C6;
            }

            .footer {
                display: flex;
                justify-content: center;
                font-size: 30px;
            }

            .foot {
                font-size: 30px;
                cursor: pointer;
            }

            .select {
                display: flex;
                justify-content: center;
                font-size: 30px;
            }

            .select span {
                margin: 20px 60px 10px;
            }
        </style>
    </head>
    <body>
        <div class="head">
            <ul class="layui-nav layui-bg-green">
                <li class="layui-nav-item"><a href="main.html">首页</a></li>
                <li class="layui-nav-item"><a href="defaultJob.html">职位</a></li>
                <li class="layui-nav-item"><a href="../../common/html/resume.html">简历</a></li>
                <li class="layui-nav-item" onclick="chat()">
                    <a href="#">消息</a>
                </li>
                <li class="layui-nav-item">
                    <div style="margin-left: 5px;">
                        <span class="head1 state" id="aa" onclick="login()">登录</span>
                        <span class="head1 state1" id="aaa" onclick="toUserPage()" style="display: none"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="select">
            <span>最新岗位</span>
        </div>
        <div class="new"></div>
        
        <div class="select">
            <span>推荐岗位</span>
        </div>
        <div class="recommend"></div>
        
        <div class="footer">
            <span class="foot" onclick="defaultJob()">查看更多</span>
        </div>
        
        <script>

            var INDEX = "http://localhost:8080/recruit/";

            let activeUser;
            $.ajax({
                url: INDEX + "user/info",
                headers: {"token": localStorage.getItem("token")},
                success: function (result) {
                    if (result.code == 0) {
                        activeUser = result.data;
                        if (activeUser == null) {
                            $(".state1").css("display", "none");

                        } else {
                            $(".state").css("display", "none");
                            $(".state1").css("display", "block");
                            $(".state1").text(activeUser.nickname == null ? activeUser.username : activeUser.nickname);
                        }
                    }
                }
            })

            $.ajax({
                url: INDEX + "/vip/vipJob",
                type: "get",
                data: {},
                success: function (result) {
                    let a = "";
                    if (result.code === 0) {
                        console.log(result.data);
                        $.each(result.data, function (index, ele) {
                            a += '<div class="jobitem"  onclick="detail(' + ele.jid + ')" >';
                            a += '<span class="jname">' + ele.jname + '</span>';
                            a += '<br><br>';
                            a += '<span class="address">' + ele.workAddress + '</span>';
                            a += '<span class="salary">' + ele.minSalary + ' - ' + ele.maxSalary + '</span>';
                            a += '<br><br>';
                            a += '<span class="cname">' + ele.cname + '</span>';
                            a += '<span class="type">' + ele.type + '</span>';
                            a += '</div>';
                        })
                        $(".recommend").html(a);
                    } else {
                        alert(result.msg);
                    }
                }
            })
            
            $.ajax({
                url: INDEX + "/vip/recentJob",
                type: "get",
                data: {},
                success: function (result) {
                    let a = "";
                    if (result.code === 0) {
                        $.each(result.data, function (index, ele) {
                            a += '<div class="jobitem" onclick="detail(' + ele.jid + ')">';
                            a += '&nbsp&nbsp';
                            a += '<span class="jname">' + ele.jname + '</span>';
                            a += '<br><br>';
                            a += '<span class="address">' + ele.workAddress + '</span>';
                            a += '<span class="salary">' + ele.minSalary + ' - ' + ele.maxSalary + '</span>';
                            a += '<br><br>';
                            a += '<span class="cname">' + ele.cname + '</span>';
                            a += '<span class="type">' + ele.type + '</span>';
                            a += '</div>';
                        })
                        $(".new").html(a);
                    } else {
                        alert(result.msg);
                    }
                }
            })


            //岗位详情
            function detail(jid) {
                $.ajax({
                    url: INDEX + "seeker/job/detail?jid=" + jid,
                    data: {},
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            sessionStorage.setItem("job", JSON.stringify(result.data));
                            window.location = "detail.html";
                        }
                    }
                })
            }

            //默认岗位页
            function defaultJob() {
                window.location = "defaultJob.html";
            }

            function login() {
                window.location.href = "../../common/html/login.html";
                window.event.returnValue = false;
            }

            function chat() {
                window.location.href = "package/html/chat.html";
            }

            function toUserPage() {
                window.location.href = "seekers.html";
            }
        </script>
    </body>
</html>
